import React, {
	Component,
	PropTypes
} from 'react'
import {
	pushInQueue
} from './action.js'

const MessageLists = (props) => {

	const handleClick = () => {
		const {
			dispatch
		} = props
		dispatch(pushInQueue({
			info: "push msg test",
			flag: "success"
		}))
		console.log(props)
	}

	// 过滤flag
	const getBgColor = (flag) => {
		console.log(flag)
		switch (flag) {
			case "hint":
				return "bg-grey"
			case "success":
				return "bg-green"
			case "warning":
				return "bg-red"
			default:
				return "bg-grey"
		}
	}

	return (
		<div className="toastlists-normalize-box">
				{
					props.lists.map((elem,index)=>{
						return (
							<div className="toastlist" key={index}>
					            <div className="shadow">
					                <div className={(()=>getBgColor(elem.flag))()}>{elem.info}</div>
					            </div>
					        </div>
        					)
					})
				}
 			
		</div>
	)
}

// <button onClick={()=>handleClick()}>Add msg</button>

MessageLists.defaultProps = {
	lists: [{
		info: "Msg Loading"
	}]
}

export default MessageLists